// 侧边导航栏组件

import React from 'react';
import styles from './sideMenu.module.css'; // css作为模块被加载
import { sideMenuList } from './mockup';
import { Menu } from 'antd';
import { GiftOutlined } from '@ant-design/icons';

export const SideMenu: React.FC = () => {
    return (
        <Menu mode='vertical' className={styles['side-menu']}>
            {sideMenuList.map((item, index) => (
                <Menu.SubMenu key={`first-${index}`} title={<span> <GiftOutlined />{item.title}</span>}>
                    {item.subMenu.map((val, ind) => (
                        <Menu.SubMenu key={`second-${index}${ind}`} title={<span><GiftOutlined />{val.title}</span>}>
                            {val.subMenu.map((v, i) => (
                                <Menu.Item key={`third-${index}${ind}${i}`}>
                                    <span><GiftOutlined />{v}</span>
                                </Menu.Item>
                            ))}
                        </Menu.SubMenu>
                    ))}
                </Menu.SubMenu>
            ))}
        </Menu>
    );
};
